<template>
  <div>
    <a-modal
      v-model:visible="visible"
      :title="title"
      @ok="handleOk"
      style="top: 30%"
      :ok-button-props="{ disabled: modal_disable_ok_button }"
      :cancel-button-props="{ disabled: false }"
    >
      <a-form
        ref="formValidate"
        :model="modalFormInline"
        layout="vertical"
        labelAlign="right"
        autocomplete="off"
      >
        <a-form-item
          :label="t('sysAccount18')"
          name="password_new"
          :rules="[
            {
              required: true,
              validator: password_new_confirm_validate,
              trigger: 'change',
            },
          ]"
        >
          <a-input-password
            :placeholder="t('placeholder16')"
            v-model:value="modalFormInline.password_new"
            :maxlength="13"
            v-input.trim.textFilter
          >
            <template #prefix>
              <LockOutlined style="color: rgba(0, 0, 0, 0.25)" />
            </template>
          </a-input-password>
        </a-form-item>
        <a-form-item
          :label="t('sysAccount8')"
          name="password_new_confirmation"
          :rules="[
            {
              required: true,
              validator: password_new_validate,
              trigger: 'change',
            },
          ]"
        >
          <a-input-password
            v-model:value="modalFormInline.password_new_confirmation"
            :placeholder="t('placeholder1')"
            :maxlength="13"
            v-input.trim.textFilter
          >
            <template #prefix>
              <LockOutlined style="color: rgba(0, 0, 0, 0.25)" />
            </template>
          </a-input-password>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";
import {
  modal_disable_ok_button,
  modalFormInline,
  modalInputValidators,
} from "../../store";
export default defineComponent({
  setup(props, { attrs }: any) {
    const formValidate = ref<any>(null);
    const visible = ref<boolean>(false);
    const showModal = () => (visible.value = true);
    const handleOk = async (e: MouseEvent) => {
      const res = reactive<any>(
        await accountApi.updatePsd({
          id: modalFormInline.id,
          password_new: modalFormInline.password_new,
          password_new_confirmation: modalFormInline.password_new_confirmation,
        })
      );

      if (res.code != 200) return message.error(res.message);
      message.success($t("base.updateSucess"));
      attrs.onRefreshTable && attrs.onRefreshTable();
      visible.value = false;
    };

    return {
      t: $t,
      formValidate,
      modal_disable_ok_button,
      password_new_confirm_validate: password_new_confirm_validate({
        formState: modalFormInline,
        keyArray: undefined,
        inputValidators: modalInputValidators,
        index: 0,
        callback: () => {
          formValidate.value?.clearValidate?.(["password_new_confirmation"]);
          modalInputValidators[0] = false;
          modalInputValidators[1] = false;
        },
      }),
      password_new_validate: password_new_validate({
        formState: modalFormInline,
        inputValidators: modalInputValidators,
        index: 1,
        keyArray: undefined,
        callback: () => {
          formValidate.value?.clearValidate?.(["password_new"]);
          modalInputValidators[0] = false;
          modalInputValidators[1] = false;
        },
      }),
      modalFormInline,
      title: ref<any>(null),
      visible,
      showModal,
      handleOk,
    };
  },
});
</script>
